<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/swiper.css">
    <style type="text/css">
    *{ margin: 0; padding: 0; font-family: 'Open Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif; box-sizing: border-box; }
    #swiper-container{box-shadow: 0px 3px 4px #888888; z-index: 2; position: fixed; top: 0; width: 100%; }
    #swiper-container .swiper-slide{ border-bottom: 2px solid #fff; line-height: 44px; color: #666; font-size: 14px; background: #fff; text-align: center; }
    #swiper-container .active-nav{ border-bottom: 2px solid #D63E3E; }
    #swiper-container2 .swiper-slide{ color: #333; height:100%; text-align: left; font-size: 24px; padding: 10px; }
    #swiper-container2{ padding-top: 44px;}
    .e-slide{ background: #eee; }
    .d-slide { background: #ddd; }
    </style>
</head>
<body>
<div class="swiper-container" id="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide active-nav">学科</div>
        <div class="swiper-slide">实践活动</div>
        <div class="swiper-slide">德育</div>
        <div class="swiper-slide">评价</div>
        <div class="swiper-slide">体制健康</div>
        <div class="swiper-slide">体检</div>
    </div>
</div>
<div class="swiper-container" id="swiper-container2">
    <div class="swiper-wrapper">
        <div class="swiper-slide e-slide">学科内容加载中...</div>
        <div class="swiper-slide d-slide">实践活动内容加载中...</div>
        <div class="swiper-slide e-slide">德育内容加载中...</div>
        <div class="swiper-slide d-slide">评价内容加载中...</div>
        <div class="swiper-slide e-slide">体制健康内容加载中...</div>
        <div class="swiper-slide d-slide">体检内容加载中...</div>
    </div>
</div>


<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/swiper.min.js"></script>
<script>
    var mySwiper2 = new Swiper('#swiper-container',{
        watchSlidesProgress : true,
        watchSlidesVisibility : true,
        slidesPerView : 3,   //tab 版块显示个数
        onTap: function(){
            mySwiper3.slideTo( mySwiper2.clickedIndex);

            var index = mySwiper2.clickedIndex;
            $.getJSON('tab.json',function(data){
                $('#swiper-container2 .swiper-slide-active').html(data[index].con);
            });

        }
    })

    var mySwiper3 = new Swiper('#swiper-container2',{
        onSlideChangeStart: function(){
            updateNavPosition();
        },
        onInit: function(swiper){
            var index = swiper.activeIndex;
            $.getJSON('tab.json',function(data){
                $('#swiper-container2 .swiper-slide-active').html(data[index].con);
            })
        }, //当前状态加载
        onTouchMove: function(swiper){
            var index = swiper.activeIndex;


            var dir_w = swiper.touches.diff;
            //$(".weizhi").html(dir_w);//判断左右方向移动
            //var cz_index = swiper.previousIndex;
            $.getJSON('tab.json',function(data){
                if( dir_w > 0 ){
                    $('#swiper-container2 .swiper-wrapper div').eq(index-1).html(data[index-1].con);
                }
                else if (dir_w < 0){
                    $('#swiper-container2 .swiper-wrapper div').eq(index+1).html(data[index+1].con);
                }
                // else{
                //     $('#swiper-container2 .swiper-slide-active').html(data[index].con);
                // }
            });


        }  //只要触发就加载下一个或前一个



    })

    function updateNavPosition(){
        $('#swiper-container .active-nav').removeClass('active-nav')
        var activeNav = $('#swiper-container .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');

        if (!activeNav.hasClass('swiper-slide-visible')) {
            console.log(1);

            if (activeNav.index()>mySwiper2.activeIndex) {
                console.log(2);
                var thumbsPerNav = Math.floor(mySwiper2.width/activeNav.width())-1
                mySwiper2.slideTo(activeNav.index()-thumbsPerNav)
            }
            else {
                console.log(3);
                mySwiper2.slideTo(activeNav.index())
            }
        }

        var index = mySwiper3.activeIndex;
        $.getJSON('tab.json',function(data){
            $('#swiper-container2 .swiper-slide-active').html(data[index].con);
        })

    }

     var ht = $(window).height();
     $("#swiper-container2").height(ht);

</script>

</body>
</html>